<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">注册</view>
		</cu-custom>
		<view class="cu-list menu card-menu margin-top margin shadow-lg radius bg-white">
			<view class="justify-center flex margin-lg">
				<view @click="chooseAvatar">
					<view v-if="avatarUrl!=''" class="cu-avatar xl round"
						:style="'background-image: url(' + avatarUrl + ');'"></view>
					<view v-else class="cu-avatar xl round">
						<text class="cu-avatar xl round bg-green">选择头像</text>
					</view>
				</view>
			</view>
			<view class="title padding sm-border text-bold text-lg">用户名密码注册</view>
			<form>
				<view class="cu-form-group">
					<text class="margin-right-sm text-red">*</text>
					<input placeholder="请输入用户名" v-model.lazy="userInfo.userName" name="username"></input>
				</view>
				<view class="cu-form-group">
					<input class="margin-left" placeholder="请输入用户昵称" v-model.lazy="userInfo.nickname"
						name="nickname"></input>
				</view>
				<view class="cu-form-group">
					<text class="margin-right-sm text-red">*</text>
					<input placeholder="请输入密码" type="password" v-model.lazy="userInfo.password" name="input"></input>
				</view>
				<view class="cu-form-group">
					<text class="margin-right-sm text-red">*</text>
					<input placeholder="请再次输入密码" type="password" v-model.lazy="password2"
						name="password2"></input>
				</view>
			</form>
			<view class="flex">
				<radio class="padding-left" value="A" style="transform: scale(0.6);" color="#39b54a" :checked="agreed"
					@click="agreed = !agreed"></radio>
				<view class="text-sm margin-top-xs">
					同意<text class="text-blue">用户服务协议</text>和
					<text class="text-blue">隐私政策条款</text>
				</view>
			</view>
			<view class="flex padding justify-center">
				<button class="cu-btn lg bg-green" @click="register">注册</button>
			</view>
			<view class="margin-lr-sm margin-bottom-xs text-sm text-right">
				<text>已有账号?</text>
				<text class="text-blue" @click="toLogin">点此登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('../../utils/util.js');
	export default {
		data() {
			return {
				url: this.url,
				avatarUrl: '',
				userInfo: {
					userName: '',
					nickname: '',
					password: ''
				},
				password2: '',
				agreed: false,
			}
		},
		computed: {
		},
		methods: {
			async register() {
				if (!this.agreed) {
					uni.showToast({
						title: '请勾选同意用户服务协议和隐私政策条款!',
						icon: 'none'
					})
				} else if (this.userInfo.password == this.password2) {
					uni.request({
						method: 'POST',
						url: this.url + '/register',
						data: {
							...this.userInfo,
							avatar: this.avatarUrl.slice(11)
						},
						success: (res) => {
							console.log(res)
							if (res.statusCode == 200) {
								this.uploadAvatar().then(() => {
									uni.navigateBack()
								})
							}else {
								uni.showToast({
									title: '用户名重复!请重新输入用户名'
								})
							}
						},
						fail: (err) => {

						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '两次输入的密码不一致!'
					})
				}
			},
			toLogin() {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			chooseAvatar() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择或从拍照选择
					success: (res) => {
						this.avatarUrl = res.tempFilePaths[0]
					},
					fail: (err) => {
						console.log('chooseImage err', err)
					}
				})
			},
			uploadAvatar() {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '图片上传中...'
					})
					var time = util.formatTimestring(new Date());
					new Promise((resolve, reject) => {
						var randstring = Math.floor(Math.random() * 1000000).toString() +
							'.png'
						randstring = time + '-' + randstring
						uni.uploadFile({
							url: this.url + '/image',
							filePath: this.avatarUrl,
							name: 'uploadFile',
							header: {
								'content-type': 'multipart/form-data'
							},
							success: (res) => {
								// console.log('success', res)
								resolve(res)
							},
							fail: (err) => {
								// console.log('fail', err)
								reject(err)
							}
						})
					}).then(result => {
						uni.hideLoading()
						resolve()
					}).catch(err => {
						console.log('err', err)
						reject()
					})
				})
			}
		}
	}
</script>

<style>

</style>
